<!--
 * @Author: Betty
 * @Date: 2021-01-06 22:36:23
 * @LastEditors: Betty
 * @LastEditTime: 2021-01-09 23:13:25
 * @Description: 注册页面
-->
<template>
  <div class="signup-page mx-auto p-3 w-330">
    <!-- 自定义表单组件 -->
    <validate-form @form-submit="onFormSumit">
      <div class="mb3">
        <label class="form-label">邮箱地址</label>
        <validate-input :rules="emailRules" v-model="formData.email" placeholder="请输入邮箱地址" type="text" />
      </div>
      <div class="mb3">
        <label class="form-label">昵称</label>
        <validate-input :rules="nameRules" v-model="formData.nickName" placeholder="请输入昵称" type="text" />
      </div>
      <div class="mb3">
        <label class="form-label">密码</label>
        <validate-input :rules="passwordRules" v-model="formData.password" placeholder="请输入密码" type="password" />
      </div>
      <div class="mb3">
        <label class="form-label">重复密码</label>
        <validate-input :rules="repeatPasswordRules" v-model="formData.repeatPassword" placeholder="请再次重复密码" type="password" />
      </div>
    </validate-form>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive } from 'vue'
// 导入自定义的表单组件和input组件，还有验证规则类型
import ValidateForm from '../components/ValidateForm.vue'
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import createMessage from '../components/createMessage'
import axios from 'axios'
import router from '../router'
export default defineComponent({
  name: '',
  components: {
    ValidateForm,
    ValidateInput
  },
  setup() {
    // 定义表单数据，是一个对象，每个字段是里面的每个属性
    const formData = reactive({
      email: '',
      nickName: '',
      password: '',
      repeatPassword: ''
    })
    // 定义邮箱验证规则
    const emailRules: RulesProp = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    // 名字验证规则
    const nameRules: RulesProp = [{ type: 'required', message: '昵称不能为空' }]
    // 密码验证规则
    const passwordRules: RulesProp = [{ type: 'required', message: '密码不能为空' }]
    // 重复密码的验证，补充一个type为custom的自定义验证规则
    const repeatPasswordRules: RulesProp = [
      { type: 'required', message: '重复密码不能为空' },
      {
        type: 'custom',
        message: '两次密码不一致',
        validator: () => {
          return formData.password === formData.repeatPassword
        }
      }
    ]
    // 表单提交后
    const onFormSumit = (result: boolean) => {
      if (result) {
        // 确保验证通过，就来准备要提交的数据
        const payload = {
          email: formData.email,
          nickName: formData.nickName,
          password: formData.password
        }
        // 拿着准备好的数据，发起新增用户的请求
        axios.post('/users', payload).then(() => {
          // 处理登录成功
          createMessage('注册成功，即将跳转到登录页', 'success')
          setTimeout(() => {
            router.push('/login')
          }, 2000)
        }).catch(e => {
          console.log(e)
          // 如果出错，在响应拦截器就会把error改了，并给出提示
        }) 
      }
    }
    return {
      onFormSumit,
      emailRules,
      nameRules,
      passwordRules,
      repeatPasswordRules,
      formData
    }
  }
})
</script>

<style>
</style>
